<template>
  <!-- 我的订单组件 -->
  <div class="my-order">
    <div class="back-nav-box">
      <van-nav-bar
        title="我的订单"
        left-text="返回"
        right-text="我的"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <div class="score">
    <!-- 图片 -->
    <div class="my-img">
      <img class="auto-img" :src="imgUrl" alt="">
    </div>

    <!-- 我的订单选择切换组件 -->
    <div class="my-box">
      <myorder-nav @item-nav="toggleBar"></myorder-nav>
    </div>

    <!-- 订单数据 -->
    <div class="my-data">
      <transition
        :duration="{enter:800,leave:300}"
        enter-active-class="animate__animated animate__bounceInLeft"
        leave-active-class="animate__animated animate__bounceOutRight"
      >
        <!-- 缓存数据,保留状态,避免重新渲染 -->
        <keep-alive>
          <component :is="comName"></component>
        </keep-alive>
      </transition>
    </div>

    </div>
  </div>
</template>

<script>
import MyorderNav from "../components/MyorderNav.vue";
import MyTotal from "../components/MyTotal.vue";
import MyDoing from "../components/MyDoing.vue";
import MyDone from "../components/MyDone.vue";

export default {
  name: "MyOrder",
  components: {
    MyorderNav,
  },
  data() {
    return {
      //背景图
      imgUrl: require('../assets/images/orderbg.png'),
      comName: MyTotal,
      //标记 全部:0 ,进行中:1 ,已完成: 2
      status: 0,
      //订单商品数据
      myOrderArr: [],
    };
  },
  created() {
    this.findOrder();

  },
  methods: {
    //点击返回
    onClickLeft() {
      this.$router.push({name: "Home"});
    },
    //点击我的
    onClickRight() {
      this.$router.push({name:'My'});
    },
    //处理来自子组件传的值
    toggleBar(obj) {
      // 
      let i = obj.data;
      //父组件记录子组件传的索引值i
      
      switch (i) {
        case 0:
          this.comName = MyTotal;
          break;
        case 1:
          this.comName = MyDoing;
          break;
        case 2:
          this.comName = MyDone;
          break;
      }
    },
    //查询订单接口
    findOrder() {
      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          status: this.status,
        }
      }).then((res) => {
        // 
        if(res.data.code==70000) {
          // this.$toast(res.data.msg);
          this.myOrderArr=res.data.result;
          // this.$store.commit('setMyOrderArr',this.myOrderArr);
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
@import url("../assets/base.less");
/deep/ .van-nav-bar__text {
  color:@mainColor;
}
/deep/ .van-nav-bar .van-icon {
  color:@mainColor;
}
.my-order {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: @bg_Color;
}
.score {
  height:92%;
  // margin-bottom: -100px;
  overflow-y: scroll;
}
.back-nav-box {
  position: sticky;
  top: 0;
  // color: @mainColor;
}

.my-img {
  width: 100%;
  // height: 100px;
  // background-color: @bgColor;
}
.my-box {
  margin: 0 10px;
  background-color: rgba(255,255,255,0.5);
  position: relative;
  top: -20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
.my-data {
  margin: 5px 10px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
 
}
</style>